<template>
  <div id="movieListBox" class="movieListBox" v-if="movieList">
    <div class="Item" v-for="(item, index) in movieList" :key="index">
      <img
        :src="item.cover"
        v-items="{ default: index == 0 ? true : false }"
        :id="'Item' + index"
        :ref="'Item' + index"
        @left="moveLeft(index)"
        @right="moveRight(index)"
        @up="moveUp(index)"
        @down="moveDown(index)"
        @click="gotoDetail(item.id)"
      />
    </div>
  </div>
</template>

<script>
var VueScrollTo = require("vue-scrollto");
export default {
  computed: {
    JTTypeCategoryId() {
      return this.$store.getters.getTypeCategoryId;
    },
    JTLangCategoryId() {
      return this.$store.getters.getLangCategoryId;
    }
  },
  data() {
    return {
      page: 1,
      limit: 30,
      typeCategoryId: false,
      langCategoryId: false,
      movieList: false,
      count: false
    };
  },
  watch: {
    JTTypeCategoryId(newValue) {
      this.typeCategoryId = newValue.id;
      this.movieLoading();
    },
    JTLangCategoryId(newValue) {
      this.langCategoryId = newValue.id;
      this.movieLoading();
    }
  },
  created() {
    if (
      this.JTTypeCategoryId.index !== undefined &&
      this.JTLangCategoryId.index !== undefined
    ) {
      this.typeCategoryId = this.JTTypeCategoryId.id;
      this.langCategoryId = this.JTLangCategoryId.id;
      this.movieLoading();
    }
  },
  methods: {
    movieLoading() {
      let options = {
        page: this.page,
        limit: this.limit,
        typeCategoryId: this.typeCategoryId,
        langCategoryId: this.langCategoryId
      };
      this.$api.movieLoading(this, options);
    },
    moveLeft(index) {
      if (index == 0 || index == 1) {
        this.$parent.moveTypeCategory(0);
      } else {
        this.$service.move(this.$refs["Item" + (index - 2)][0]);
        this.scoll(index);
      }
    },
    moveRight(index) {
      let listIndex = this.movieList.length - 1;
      if (index + 2 > listIndex) {
        this.$service.move();
      } else {
        this.$service.move(this.$refs["Item" + (index + 2)][0]);
        this.scoll(index);
      }
    },
    moveUp(index) {
      if (index % 2 == 0) {
        this.$parent.moveLangCategory(0);
      } else {
        this.$service.move(this.$refs["Item" + (index - 1)][0]);
        this.scoll(index);
      }
    },
    moveDown(index) {
      if (index % 2 == 1) {
        this.$service.move();
      } else {
        this.$service.move(this.$refs["Item" + (index + 1)][0]);
        this.scoll(index);
      }
    },
    scoll(index) {
      let element = "#Item" + index;
      let duration = 100;
      var options = {
        container: "#movieListBox",
        easing: "linear",
        offset: -400,
        force: true,
        cancelable: true,
        x: true,
        y: false
      };
      VueScrollTo.scrollTo(element, duration, options);
    },
    gotoDetail(id) {
      this.$router.push({
        path: "/detail/" + id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.movieListBox {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow-x: auto;
  overflow-y: hidden;
}
// 去除滚动条
.movieListBox::-webkit-scrollbar {
  display: none;
}
.Item {
  width: 17%;
  height: 36vh;
  margin: 8px 0px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Item > img {
  border-radius: 10px;
  transition: 300ms;
  width: 80%;
}
.focus {
  padding: 0px !important;
}
</style>
